<template>
  <div class="cardItem">
    <div class="card">
      <el-card class="box-card" body-style="padding:0px;display:flex;flex-wrap:wrap;">
        <div slot="header" class="clearfix">
          <span>{{panelName}}</span>
        </div>
        <div class="cartImg">
          <img src="http://theme.opencartdemo.cn/smart-3200-free/image/catalog/smart/banner/banner-3.png" alt="">
        </div>
        <div v-for="(item,index) in commList" :key="index" v-if="index < 6" class="text item cartItem" @click="handleClick(item)">
          <!--          <div :style="'background-image:url('+img+')'" class="cardImg"></div>-->
          <div class="cardImg">
            <img :src="item.imgUrl" alt="">
          </div>
          <div class="cartDetail">
            <div class="cartName">
              {{item.cname}}
            </div>
            <div class="block">
              <el-rate v-model="item.star" disabled></el-rate>
            </div>
            <div class="cartPrice">
              {{`￥`+item.price}}
            </div>
            <div class="btnG">
              <el-button class="cartCol" icon="el-icon-star-on" @click.stop="addCollection(item.id)"></el-button>
              <el-button class="cartShop" type="danger" icon="el-icon-shopping-cart-2" @click.stop="addCart(item.id)">加入购物车</el-button>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
  import * as CollectionRequest from '../assets/collection/collection'
  import * as CartRequest from "../assets/cart/cart";
  export default {
    name: "cardItem",
    props:{
      commodity: {
        type: Array,
      },
      cardName : {
        type: String,
      }
    },
    data() {
      return {
        panelName: this.cardName,
        commList: this.commodity,
      }
    },
    watch: {
      commodity() {
        this.commList = this.commodity
      },
      cardName() {
        this.panelName = this.cardName
      }
    },
    methods: {
      handleClick(item){
        this.$router.push(
          {
            path:'/category/detail',query:{category:item.id}
          }
        )
      },
      addCollection(commodityId){
        CollectionRequest.addCommodity(this,commodityId)
      },
      addCart(commodityId){
        let cartData ={
          cartId: this.$store.state.cartId,
          commodityId: commodityId,
          count: 1,
        }
        CartRequest.addCart(this,cartData);
      }
    }

  }
</script>

<style lang="less">
  .cardItem {
    margin-bottom: 30px;
    .card {
      //width: 300px;
      .cartItem:hover {
        box-shadow: inset 0 0 38px rgba(0, 0, 0, 0.08);

        .cartPrice {
          display: none;
        }

        .btnG {
          display: block !important;
        }
      }

      .el-card__header {
        background: linear-gradient(#fff, #f5f5f5)
      }
      .cartImg{
        border: 1px solid #ddd;
        width: 554px;
        height: 410px;
        img {
          width: 100%;
          height: 100%;
          cursor: pointer;
        }
      }
      .cartItem {
        display: inline-block;
        border: 1px solid #ddd;
        height: 410px;
        transition: all 0.3s ease-in-out 0s;

        .cardImg {
          width: 275px;
          padding: 40px;

          img {
            width: 200px;
            height: 200px;
            cursor: pointer;
          }
        }

        .cartDetail {
          text-align: center;

          div {
            margin-bottom: 10px;
          }

          .cartName:hover {
            color: #be1e13;
            cursor: pointer;
          }

          .cartPrice {
            color: red;
            height: 34px;
          }

          .btnG {
            display: none;

            .cartCol {
              padding: 5px 10px;

              i {
                font-size: 20px;
                /*color: red;*/
              }
            }

            .cartShop {
              padding: 8px 10px;
              margin: 0;
            }
          }

        }

      }
    }
  }
</style>
